

import React, { useState,forwardRef, useImperativeHandle } from 'react';
import Close from '../../assets/close-cfc84986.svg'
import '../../pages/App.css';
import './Theme.css'

const colors = ['#7EB8D6','#FF6900','#7BDCB5','#00D084','#8ED1FC','#0693E3','#ABB8C3','#EB144C','#F78DA7','#555555' ]

const Theme = forwardRef((props, ref) => {

  const [showDialog,setShowDialog] = useState(false)
  const [colorValue,setColorValue] = useState("7EB8D6")
  
  useImperativeHandle(ref, (props) => ({
    setShowDialog
  }));


  const colorClick = (item)=>{
    localStorage.setItem('themeBgColor',item)
    document.getElementsByClassName('App')[0].style.backgroundColor = item
  }

  return (
  <div key={'theme'} style={{display:showDialog?'block':'none'}}>
        <div className="relative z-50" id="headlessui-dialog-:rdg:" role="dialog" aria-modal="true" data-headlessui-state="open"
      aria-labelledby="headlessui-dialog-title-:rdi:">
      <div className="fixed inset-0 bg-black/30" aria-hidden="true"></div>
      <div className="fixed inset-0 flex items-center justify-center max-h-screen m-5">
        <div
          className="mx-auto rounded-3xl bg-primary-background shadow-2xl max-h-full overflow-hidden flex flex-col rounded-xl w-[600px] min-h-[300px]"
          id="headlessui-dialog-panel-:rdh:" data-headlessui-state="open">
          <h2 className="border-b border-solid border-primary-border flex flex-row justify-center items-center py-4 px-5"
            id="headlessui-dialog-title-:rdi:" data-headlessui-state="open"><span className="ml-auto"></span><span
              className="font-bold text-primary-text text-base">主题设置</span><img alt='' src={Close} onClick={()=>{
                setShowDialog(false)
              }}
              className="w-4 h-4 ml-auto mr-[10px] cursor-pointer"/></h2>
          <div className="p-5 pb-10 flex flex-col gap-5">
            <div>
              <p className="font-bold text-lg mb-3">主题色</p>
              <div className="flex flex-col gap-3">
                <div className="twitter-picker">
                  <div className='zhan'></div>
                  <div className='zhan'></div>
                  <div style={{padding: "15px 9px 9px 15px"}}>
                    {
                      colors.map((item)=>{
                        return (
                          <span onClick={()=>{colorClick(item)}} key={item}>
                          <div title={item} tabIndex="0" className='color'
                            style={{background: item}}>
                          </div>
                        </span>
                        )
                      })
                    }
                    <div className='color2'
                    onClick={()=>{colorClick('#'+colorValue)}}
                      style={{background: '#'+colorValue}}>
                      #</div>
                    <div style={{position: "relative"}}>
                      <input id="rc-editable-input-1" onChange={(e)=>{
                        setColorValue(e.target.value)
                      }} spellCheck="false" value={colorValue} className='input'/>
                    </div>
                    <div style={{clear: "both"}}></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  )
})

export default Theme